<!--
* @fileName tree.vue
* @author caoke
* @date 2023/09/22 16:45:29
* @version V1.0.0
* @description 
!-->
<template>
  <div>
    <!-- <el-button @click="setCheckedKeys">通过 key 选中</el-button> -->
    <!-- <el-button @click="getCheckedKeys">通过 key 获取</el-button>
    <el-button @click="setCheckedNodes">通过 node 选中</el-button>
    <el-button @click="getCheckedNodes">通过 node 获取</el-button> -->
    <c-dialog v-if="isShowAddress" :visible.sync="isShowAddress">
      <c-tree ref="cityTree" :data="data" />
      <div slot="footer">
        <el-button @click="isShowAddress = false">取 消</el-button>
        <el-button type="primary" @click="ok">确 定</el-button>
      </div>
    </c-dialog>


  </div>
</template>

<script>
import CDialog from '../../components/base/c-dialog/c-dialog.vue';
import cTree from '../../components/base/c-tree/c-tree.vue';
import res from '../../components/base/c-tree/data.js'

export default {
  components: { cTree, CDialog },
  name: '',
  data() {
    return {
      data: res.data,
      isShowAddress: true,
      citylist: [
        {
          "adcode": "110000",
          "associationStatus": "1",
          "name": "北京市"
        },
        {
          "adcode": "111111",
          "associationStatus": "1",
          "name": "二龙湖"
        },
        {
          "adcode": "120000",
          "associationStatus": "1",
          "name": "天津市"
        },
        {
          "adcode": "130100",
          "associationStatus": "1",
          "name": "石家庄市"
        }
      ]
    }
  },
  mounted() { 
    this.$nextTick(()=>{
              this.$refs.cityTree.setCheckedKeys(this.citylist.map(i => i.adcode))
    })
  },
  methods: {
    ok() {
      console.log('11', this.$refs.cityTree.getValue());
      // console.log('22', this.$refs.cityTree.getCheckedNodes());

    },
    setCheckedKeys() {
      this.isShowAddress = true
      if (this.$refs.cityTree) {
        this.$refs.cityTree.setCheckedKeys(this.citylist.map(i => i.adcode))
      }

    },
    getCheckedKeys() {
      this.$refs.cityTree.getCheckedKeys()
    },
    setCheckedNodes() {
      this.$refs.cityTree.setCheckedNodes(this.citylist)
    },
    getCheckedNodes() {
      this.$refs.cityTree.getCheckedNodes()
    },
    areaSelectComplete() {

    }

  }
}

</script>
<style lang='scss' scoped>
.div {
  background-color: pink;
  width: 100%;
  height: 100%;

}

.dialog_wrap {
  padding: 0;
  background-color: red;
}
</style>